<template>
  <Layout>
    <!--<Breadcrumb :style="{margin: '10px 0'}">
      <BreadcrumbItem>文件管理</BreadcrumbItem>
      <BreadcrumbItem>文件列表</BreadcrumbItem>
    </Breadcrumb>-->
    <Content>
      <Row  v-show="top_show" class="top_sec" :gutter="5" >
        <i-col span="5" >

          <Button v-show="top_show && CD_.user_Data.add_class_list.indexOf(active_class_id.toString()) > -1"
                  style="font-size: 14px;    padding: 4px 10px;" @click="setfile_modal = true" type="dashed" >
            <Icon type="md-cloud-upload"
                  style="font-size: 25px;line-height: 15px;margin-right: 5px;" />上传文件</Button>
          <span style="color: #ffffff">&nbsp;</span>
        </i-col >
        <i-col span="8" >
          <DatePicker :value="tiemAcitve"  type="daterange" placement="bottom-end" placeholder="选择时间范围" style="width: 100%"  @on-change="change_time"></DatePicker>
        </i-col>
        <!--<i-col span="4" style="margin-top:1px">
          <Cascader :data="class_data"  v-model="ClassActive"   filterable placeholder="请选择文件分类" @on-change="change_class" change-on-select  ></Cascader>
        </i-col>-->
        <i-col  span="11">
          <Input v-model="search_value" placeholder="文件名称">
          <Button slot="append" icon="ios-search" @click="search_data"></Button>
          </Input>
        </i-col >

      </Row>

      <Row :gutter="15" v-show="top_show">
        <Col v-for="(item,index) in class_data" :key="item.title + item.id" :xs="6" :sm="4" :md="3" :lg="2" style="margin-bottom: 20px">

          <a v-if="CD_.user_Data.class_list.indexOf(item.id.toString()) > -1" class="file_top_img" @click="open_tree(item.id,item,item.children)">
            <img v-if="item.img_src != '' && item.img_src != null" :src="CD_.qj_url+item.img_src" alt="">
            <Icon class="ico_img"  v-else :type="item.id != active_top ?'ios-folder':'ios-folder-open'"  />
            <p :class="item.id == active_top ? 'text_alt active':'text_alt'">{{item.title}}</p>
          </a>

          <Tooltip v-else  content="请向管理员申请开放权限" placement="top">
            <a class="file_top_img gray">
              <img v-if="item.img_src != '' && item.img_src != null" :src="CD_.qj_url+item.img_src" alt="">
              <Icon class="ico_img"  v-else :type="item.id != active_top ?'ios-folder':'ios-folder-open'"  />
              <p :class="item.id == active_top ? 'text_alt active':'text_alt'">{{item.title}}</p>
            </a>
          </Tooltip>
        </Col>
      </Row>

      <Row v-show="!top_show" :gutter="25" style="margin-top: 40px">
        <Col v-for="(item,index) in class_data" :key="item.title + item.id" :xs="24" :sm="12" :md="8" :lg="6" style="margin-bottom: 50px">

            <a v-if="CD_.user_Data.class_list.indexOf(item.id.toString()) > -1" :class="class_img_bg" @click="open_tree(item.id,item,item.children)">
              <img v-if="item.img_src != '' && item.img_src != null" :src="CD_.qj_url+item.img_src" alt=""  :style="imgheight">
              <Icon class="ico_img"  v-else :type="item.id != active_top ?'ios-folder':'ios-folder-open'"  />
              <p class="text_alt">{{item.title}}</p>
            </a>

            <Tooltip v-else  content="请向管理员申请开放权限" placement="top">
              <a :class="class_img_bg_rg" >
                <img v-if="item.img_src != '' && item.img_src != null" :src="CD_.qj_url+item.img_src" alt=""  :style="imgheight">
                <Icon class="ico_img"  v-else :type="item.id != active_top ?'ios-folder':'ios-folder-open'"  />
                <p class="text_alt">{{item.title}}</p>
              </a>
            </Tooltip>

        </Col>
      </Row>

      <Breadcrumb   v-show="top_show" separator=">">
        <a  @click="top_show = false"><BreadcrumbItem>主菜单</BreadcrumbItem></a>
        <a  v-for="(item,index) in brea_list" :key="item.title+item.id"  @click="bread_list(item)"><BreadcrumbItem>{{item.title}}</BreadcrumbItem></a>
      </Breadcrumb>

      <Row :gutter="15" v-show="top_show">
        <Col v-for="(item,index) in children_class_data" :key="item.title + item.id" v-show="CD_.user_Data.class_list.indexOf(item.id.toString()) > -1" :xs="6" :sm="4" :md="3" :lg="2" style="margin-bottom: 20px ;">
        <a class="file_children_img" @click="open_children_tree(item.id,item,item.children)" :alt="item.title">

          <img v-if="item.img_src != '' && item.img_src != null" :src="CD_.qj_url+item.img_src" alt="">
          <Icon v-else :class=" item.is_children == 'y' ? 'ico_img' : 'ico_img2' "  :type="item.id != children_top ?'ios-folder':'ios-folder-open'" />
          <p :class="item.id == children_top ? 'text_alt active':'text_alt'">{{item.title}}</p>
        </a>
        </Col>
      </Row>

      <Table  v-show="top_show" height="460" :columns="columns" :data="table_data" ></Table>
      <div  v-show="top_show"  style="float: right ; margin: 10px">
        <Page :total="page.page_total"
              :page-size="page.page_size"
              :current="page.page_current"
              :page-size-opts="[14,20,30,40,50]"
              size="small" show-elevator show-sizer
              @on-change="change_page"
              @on-page-size-change="change_page_size"></Page>
      </div>
    </Content>
    <Modal
      v-model="dow_modal"
      width="260"
      title="文件列表">

      <ul style="list-style-type: none">
        <li v-for="(item,index) in file_class" style="line-height: 35px">
          <span>【{{item}}】文件（{{index+1}}）</span>
          <a :href="CD_.qj_url + file_src[index]" style="float: right" download=""><Button  size="small" type="primary">下载</Button></a>
        </li>
      </ul>
      <div slot="footer">
        <Button  size="large" @click="dow_modal = false">取消</Button>
      </div>
    </Modal>
    <Modal
      width="60%"
      footer-hide
      v-model="setfile_modal">
      <set-file v-if="setfile_modal" :class_list_id= 'class_list_id' class_index="1" :class_name ='class_name' ></set-file>
    </Modal>
    <!-- 查看 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"></add-or-update>
  </Layout>
</template>

<script>
  import ICol from "../../../node_modules/iview/src/components/grid/col.vue";
  import SetFile from './SetFile.vue'
  import AddOrUpdate from './news-add-or-update'
  export default {
    components: {ICol,SetFile,AddOrUpdate},
    name: 'FileList',
    data() {

      return {
        dow_modal:false,//下载弹窗
        setfile_modal:false,//上传文件
        dow_src: '',//文件下载地址
        search_value: '',//搜索框内容
        FileClassActive:'全部类型',
        active_top : 0 ,//选中的
        children_top : 0 ,//选中的
        active_class_id : 0 ,//选中的 ID
        tiemAcitve:[],
        top_show:false,//是否显示顶部
        addOrUpdateVisible:false,//查看弹窗
        ClassActive:[],
        file_class:[],
        screenHeight: document.body.clientHeight,
        file_src:[],
        brea_list:[], //列表
        top_class_data:[], //下级文件
        children_class_data:[], //下级文件
        file_name:'',
        file_id:0,
        class_img_bg:'file_list_img' ,//图标背景色
        class_img_bg_rg:'file_list_img gray' ,//图标背景色
        class_list_id: [],
        class_id: [],
        RolechangeRed: 0,//第几个按钮
        DepartmentchangeRed: 0,//第几个按钮
        FileClasschangeRed: 0,//第几个按钮
        search_select: 'loginname',//搜索的类型
        page: {
          page_current: 1,//分页显示第几页
          page_total: 40,//分页总条数
          page_size: 14,//每页多少条
        },
        imgheight: 'height:260px',
        class_name:'',
        class_data: [],//文件
        columns: [
          {
            title: '文件编号',
            key: 'file_number'
          },
          {
            title: '文件名称',
            key: 'file_name'
          },
          {
            title: '文件类型',
            key: 'file_class'
          },
          {
            title: '文件分类',
            key: 'class_title'
          },
          {
            title: '上传角色',
            key: 'user_role'
          },
          {
            title: '所属项目',
            key: 'user_department'
          },
          {
            title: '上传时间',
            key: 'date'
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 80,
            render: (h, params) => {
              const row = params.row;
              const display_dow = this.CD_.user_Data.down_class_list.indexOf(row.class_id.toString()) > -1  ?"inline-block":"none"
              const display_view = this.CD_.user_Data.view_class_list.indexOf(row.class_id.toString()) > -1  ?"inline-block":"none"
              return h('div', [
                /*h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    display: display_dow,
                  },
                  on: {
                    click: () => {
                      this.file_slect(params.row)
                    }
                  }
                }, '下载'),*/
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    display:display_view,
                  },
                  on: {
                    click: () => {
                      this.file_view(params.row,display_dow)
                    }
                  }
                }, '查看')
              ]);
            }
          }
        ],
        table_data: []
      }
    },
    methods: {
      careHeight(){
        var orderHight = document.documentElement.clientHeight ;
        this.imgheight = 'height:' + (orderHight-375)/2 + 'px'
      },
      bread_list(item){
        this.active_class_id = item.id ;
        this.children_top = 0 ;
        this.brea_list.splice(this.brea_list.indexOf(item)+1, 100)
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/getChildren',
          data: {
            id: item.id,
            user_id: this.CD_.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data
          if (json.status) {
            this.children_class_data = json.children_class_data ;
          }
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '分类查询，错误：',desc:'错误：'+ err});
        }.bind(this))


        this.class_name = item.title ;
        this.getRole_data() ;
      },
      open_tree(tree_id,item,children){
//        点击顶级菜单菜单
        this.brea_list = []

        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/getChildren',
          data: {
            id: tree_id,
            user_id: this.CD_.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data
          if (json.status) {
            this.children_class_data = json.children_class_data ;
          }
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '分类查询，错误：',desc:'错误：'+ err});
          this.isLoading = false;
        }.bind(this))

        this.active_top = tree_id ;//选中的
        this.top_show = true ;

        this.class_name = item.title ;

        this.active_class_id = tree_id ;
        this.class_list_id = [] ;
        this.class_list_id.push(tree_id) ;
        this.class_id = tree_id ;
        this.getRole_data() ;
      },
      open_children_tree(tree_id,item,children){
//        点击下级菜单
        //判断是不是同一级的
        this.active_class_id = tree_id ;
        this.class_name = item.title ;

        if(this.brea_list.length > 0 && item.parent_id == this.brea_list[this.brea_list.length-1].parent_id ){
          this.brea_list.pop() ;
          this.class_list_id.pop() ;
          if(this.brea_list.indexOf(item) == -1){
            this.brea_list.push(item) ;
            this.class_list_id.push(tree_id) ;
          }
        }else {
          if(this.brea_list.indexOf(item) == -1){
            this.brea_list.push(item) ;
            this.class_list_id.push(tree_id) ;
          }
        }

        this.children_top = tree_id ;//选中的


        if(item.is_children == 'y'){
          this.$http({
            method: 'post',
            url: this.CD_.qj_url + 'index/File/getChildren',
            data: {
              id: tree_id,
              user_id: this.CD_.user_Data.id,
            }
          }).then(function (res) {

            var json = res.data
            console.log(json);
            if (json.status) {
              this.children_class_data = json.children_class_data ;
            }
          }.bind(this)).catch(function (err) {
            this.$Notice.error({title: '分类查询，错误：',desc:'错误：'+ err});
            this.isLoading = false;
          }.bind(this))
        }


        this.class_id = tree_id ;

        this.getRole_data() ;

      },
      change_page(page) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择页数时触发
        * page  当前选择的页数
        *=====================================================*/
        this.page.page_current = page
        this.getRole_data();
      },
      change_page_size(page_size) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择每页多少条时触发
        * page_size  当前每页多少条
        *=====================================================*/
        this.page.page_size = page_size
        this.getRole_data();
      },
      search_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 18:30
        *=======================================================
        *@function  搜索内容
        *=====================================================*/
        this.getRole_data();

      },
      file_view(data,display_dow) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  查看文件
        *=====================================================*/
        let element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
       /* console.log(data.file_src);
        this.$router.push({
          path:'./fileview',
          query:{
            file_id:data.id,
            file_src:data.file_src,
            display_dow:display_dow
          }
        }) ;*/
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.file_id = data.id
          /*if (window.location.host != '127.0.0.1:8080') {
            this.$refs.addOrUpdate.file_src = 'http://127.0.0.1:8086' + window.location.host + data.file_src;
          } else {
            this.$refs.addOrUpdate.file_src = this.CD_.file_src + data.file_src;
          }*/
          this.$refs.addOrUpdate.file_src = data.file_src
          this.$refs.addOrUpdate.display_dow = display_dow
          this.$refs.addOrUpdate.init()
        })

      },
      add_file_pge() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:55
        *=======================================================
        *@function  查看文件
        *=====================================================*/

        var _this = this ;
        this.$router.push({
          path:'./setfile',
          query:{
            class_list_id : _this.class_list_id,
            class_id : _this.class_id,
          }
        }) ;


      },
      file_slect(data){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/11/19 13:44
        *=======================================================
        *@function  显示下载文件列表
        *=====================================================*/
        this.file_class = data.file_class.split(",") ;
        this.file_src = data.file_src.split(",") ;
        this.file_name = data.file_name ;
        this.file_id = data.id ;

        this.dow_modal = true;
      },
      change_class(value, selectedData){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/23 17:26
        *=======================================================
        *@function  选择类别
        *=====================================================*/
        console.log(value) ;

        this.ClassActive = value ;

        this.getRole_data();
      },
      change_time(value){
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/30 10:40
        *=======================================================
        *@function  时间选择
        *=====================================================*/
        console.log(value[0]);
        if(value[0] != ''){
          this.tiemAcitve = value ;
        }else {
          this.tiemAcitve = [] ;
        }

        this.getRole_data();
      },
      getRole_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:36
        *=======================================================
        *@function  获取初始化信息、搜索、分页
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/getFileList',
          data: {
            class_id: this.active_class_id,
            user_id: this.CD_.user_Data.id,
            search_value: this.search_value,
            page_current: this.page.page_current,
            page_size: this.page.page_size,
            tiemAcitve:  JSON.stringify(this.tiemAcitve),
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.table_data = json.file_data;
            this.page = json.page;
            this.$Loading.finish();
          } else {
            this.$Notice.error({title: '文件不存在~~~'});
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '初始化数据失败，错误：' + err});
        }.bind(this))
      },
      getSelsct(){
        /*======================================================
        *@author wf_Huang
        *@Time ] 11:50
        *=======================================================
        *@function 初始化数据
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/csh_RDC2',
          data: {
            user_id: this.CD_.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data
          if (json.status) {
            this.class_data = json.class_list ;
          } else {
            this.$Notice.error({title: '分类查询，错误：'+res.msg});
          }
          this.isLoading = false;
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '分类查询，错误：',desc:'错误：'+ err});
          this.isLoading = false;
        }.bind(this))

      }
    },
    mounted() {
      this.getRole_data();
      this.getSelsct();
      this.careHeight()
      const that = this;
      window.addEventListener("resize", function() {
        that.careHeight()
      });
    }
  }
</script>

<style scoped>
  .user_text{
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85098);
    line-height: 18px;
    display: block;
    margin-bottom: 16px;
  }
  .ivu-col{
    font-size: 14px;
  }
  .file_list_img {
    position: relative;
    display: block;
    text-align: center;
  }
  .file_list_img img{
    width: 100%;
    height: 260px;
  }


  .file_list_img .ico_img{
    font-size: 75px;
    margin: 10px 10px 20px;
  }
  .file_list_img .text_alt{
    height: 40px;
    line-height: 40px;
    color: #333333;
    font-size: 25px;
    text-align: center;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .file_top_img {
    position: relative;
    display: block;
    text-align: center;
  }
  .file_top_img .ico_img{
    font-size: 75px;
    margin: 10px 10px 20px;
  }
  .file_top_img img{
    width: 100%;
    height: 50px;
  }
  .file_top_img .text_alt{
    position: absolute;
    height: 25px;
    line-height: 25px;
    left: 0;
    right: 0;
    bottom:  -10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    font-style: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .file_top_img .text_alt.active{
    background-color: rgba(255, 19, 0, 0.8);

  }
  .file_children_img .text_alt.active{
    color: rgba(255, 19, 0, 0.8);

  }
  .file_children_img {
    position: relative;
    display: block;
    text-align: center;
    min-height: 113px;

  }
  .file_children_img img{
    width: 100%;
    height: 50px;
    margin-top: 23px;
    display: inline-block;

  }
  .file_children_img .ico_img{
    font-size: 75px;
    margin: 10px 10px 20px;
    color: #F8CC23;
  }

  .file_children_img .ico_img2{
    font-size: 75px;
    margin: 10px 10px 20px;
    color: #6699FF;
  }

  .file_children_img .text_alt{
    position: absolute;
    height: 35px;
    line-height: 17px;
    left: 0;
    right: 0;
    top: 80px;
    color: #333333;
    font-size: 12px;
    text-align: center;
    text-align: -webkit-center;
    font-style: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }

  @media (min-width: 1200px){
    .ivu-col-span-lg-2 {
      display: block;
      width: 8.33333333%;
      min-width: 110px;
    }
  }

/*  .gray {
    -webkit-filter: grayscale(80%);
    -moz-filter: grayscale(80%);
    -ms-filter: grayscale(80%);
    -o-filter: grayscale(80%);
    filter: grayscale(80%);
  }*/

  .ivu-tooltip {
    display: inline-flex;
    width: 100%;
  }

  .top_sec{
    position: absolute;
    top: 40px;
    width: 40%;
    z-index: 99;
    right: 210px;
    height: 35px;
    margin-top: 26px;
  }

</style>
